<template>
    <div>
<!--面包屑区域-->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">员工管理</a></el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">查询员工</a></el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索区域-->
   <el-form :inline="true" :model="queryparams" class="demo-form-inline" size="small" label-width="80px">
    <el-row>
        <el-col :span="6">
             <el-form-item label="姓名:">
            <el-input v-model="queryparams.employeeName" placeholder="请输入姓名"></el-input>
            </el-form-item>
        </el-col>
       <el-col :span="6">
            <el-form-item label="性别:">
            <el-select v-model="queryparams.sex" placeholder="--请选择--" class="slt">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
            </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="身份证:">
            <el-input v-model="queryparams.cardId" placeholder="请输入身份证"></el-input>
             </el-form-item>
        </el-col>
    </el-row>
  <el-row>

    <el-col :span="6">
            <el-form-item label="电话：">
            <el-input v-model="queryparams.phone" placeholder="请输入电话号码"></el-input>
             </el-form-item>
    </el-col>
    <el-col :span="6">
    <el-form-item label="职位:">
      <el-select v-model="queryparams.jobId" placeholder="--请选择--" class="slt">

        <el-option v-for="job in jobs"  :key="job.id" :label= job.name :value="job.id"></el-option>

      </el-select>
    </el-form-item>
    </el-col>
      <el-col :span="6">
    <el-form-item label="部门:">
      <el-select v-model="queryparams.deptId" placeholder="--请选择--" class="slt">

        <el-option v-for="dept in depts"  :key="dept.id" :label= dept.name :value="dept.id"></el-option>
 
      </el-select>
    </el-form-item>
    </el-col>
     

    <el-form-item>
      <el-button type="primary" icon="el-icon-search" id="query">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="danger" icon="el-icon-delete" id="delete" @click="deleteEmployee">删除</el-button>
    </el-form-item>

  </el-row>
  </el-form>
 <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    
    <el-table-column
      prop="name"
      label="姓名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      width="100">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="手机号码"
      width="180">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="180">
    </el-table-column>
    <el-table-column
      prop="job"
      label="职位"
       width="100"
    >
    </el-table-column>
    <el-table-column
      prop="education"
      label="学历"
      width="100">
    </el-table-column>
      <el-table-column
      prop="cardid"
      label="身份证号码"
      width="180">
    </el-table-column>
     <el-table-column
      prop="deft"
      label="部门"
      width="100">
    </el-table-column>
     <el-table-column
      prop="address"
      label="联系地址"
      width="250">
    </el-table-column>
    
    <el-table-column
      label="建档日期"
      width="150">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
     <el-table-column
      label="操作"
      show-overflow-tooltip="">
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryparams.currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="queryparams.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </div> 
</template>

<script>
  export default {
    name: 'EmployeeShow',
    data() {
      return {


        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: [],

        
        currentPage: 1,// 当前页数
        total:0,//总条数
        pagesize: 5,//页面大小,

      queryparams :{
        employeeName:null,
        sex:null,
        cardId:"",
        phone:"",
        deptId:null,
        jobId:null,
        currentPage:1,
        pagesize:5,
      },
      depts:[

       ],
      jobs:{}
        
      ,

      employeeList:{

      },
      }
    },
    mounted(){
    //  this.getDepts();
      this.getJobs();
    //  this.getEmployeeList();
    },
    filters: {
      // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
      dataFormat(input, pattern = "") {
        // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
        var dt = new Date(input)
        // 获取年月日
        var y = dt.getFullYear()
        var m = (dt.getMonth() + 1).toString().padStart(2, "0")
        var d = dt.getDate().toString().padStart(2, "0")
        // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
        // 否则，就返回  年-月-日 时：分：秒
        if (pattern.toLowerCase() === "yyyy-mm-dd") {
          return `${y}-${m}-${d}`
        } else {
          // 获取时分秒
          var hh = dt.getHours().toString().padStart(2, "0")
          var mm = dt.getMinutes().toString().padStart(2, "0")
          var ss = dt.getSeconds().toString().padStart(2, "0")
          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
      },
    },
    methods: {
      onSubmit() {
 
      },
      getJobs(){
       this.$http.post("/job/findAll").then(resp =>{
        console.log(resp)
        if(resp.data.flag){
                this.jobs=resp.data.data
            }
       })
      },
      // getDepts(){
      //   this.$http.get("/dept/list").then(resp =>{
      //       // console.log(resp.data.data)
      //       if(resp.data.flag){
      //           this.depts=resp.data.data
      //       }

      //   })
      // },
      // getEmployeeList(){
      //   this.$http.get("/employee/find",this.queryparams).then(resp =>{
      //           console.log(resp)
      //   })
      // },
      handleSizeChange(val) {
        this.queryparams.employeeName=""
        this.queryparams.pagesize=val;
        this.queryparams.currentPage=1;
      },
      handleCurrentChange(val) {
        this.queryparams.employeeName=""
        this.queryparams.currentPage=val;
    
      },

       deleteEmployee() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },

      

       toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      

    }
  }
</script>

<style scoped>
 .el-form-item .el-input{
   margin-top: 10px;
 }
 .slt{
   margin-top: 10px !important;
 }
.el-form-item__label{
   padding: 13px 12px 0px 0px  !important;
   color:red !important
 }
#query{
    padding: 13px 31px;
    font-size: 12px;
    border-radius: 8px;
 }
#delete{
    padding: 13px 31px;
    font-size: 12px;
    border-radius: 8px;
 }
</style>
